<template>
  <div class="masklayer" v-show="spinning">
    <div class="childs">
      <a-spin tip="加载中..." :spinning="spinning" size='large'></a-spin>
    </div>
  </div>
</template>
<script lang='ts'>
import { nextTick, onMounted, ref, SetupContext } from "vue";
import echarts, { EChartOption } from "echarts";
import { option } from "./option";
import { pieoption } from "./pieoption";
import { baroption } from "./baroption";
import { appdataapi, pieapi } from "@/api/homeApi";
export default {
  props: {
    parameter: Object,
  },
  setup(props: any, ctx: SetupContext) {
    let spinning = ref(false);

    nextTick(() => {
      const body = document.querySelector("body");
      const masklayer = document.getElementsByClassName("masklayer")[0];
      if (body) {
        if (masklayer) {
          body.appendChild(masklayer);
        }
      }
    });

    onMounted(async () => {
      try {
        spinning.value = true;
        const piedata = await pieapi();
        const datas = await appdataapi();
        /*=========================================================== */
        /*=========================================================== */
        const myChart1 = echarts.init(
          document.getElementById("custom1") as HTMLDivElement
        );
        myChart1.setOption(
          option({
            percentage: 100,
            frequency: piedata.data.usernum.public,
            name: "公有池次数",
          }),
          true
        );
        myChart1.resize();
        /*=========================================================== */
        /*=========================================================== */
        const myChart2 = echarts.init(
          document.getElementById("custom2") as HTMLDivElement
        );
        myChart2.setOption(
          option({
            percentage: 100,
            frequency: piedata.data.usernum.dowtimes,
            name: "分发次数",
          }),
          true
        );
        myChart2.resize();
        /*=========================================================== */
        /*=========================================================== */
        const myChart3 = echarts.init(
          document.getElementById("custom3") as HTMLDivElement
        );
        myChart3.setOption(
          option({
            percentage: 100,
            frequency: piedata.data.usernum.private,
            name: "私有池次数",
          }),
          true
        );
        myChart3.resize();
        /*=========================================================== */
        /*=========================================================== */
        const myChart4 = echarts.init(
          document.getElementById("custom4") as HTMLDivElement
        );
        myChart4.setOption(
          option({
            percentage: 100,
            frequency: piedata.data.cernum,
            name: "证书剩余次数",
          }),
          true
        );
        myChart4.resize();
        /*=========================================================== */
        /*=========================================================== */
        const myChart5 = echarts.init(
          document.getElementById("custom5") as HTMLDivElement
        );
        myChart5.setOption(
          pieoption({
            value: piedata.data.usernum.todaydow,
            name: "今日分发下载",
          }),
          true
        );
        myChart5.resize();
        /*=========================================================== */
        /*=========================================================== */
        const custom6 = document.getElementById("custom6");
        const myChart6 = echarts.init(custom6 as HTMLDivElement);
        myChart6.setOption(
          pieoption({
            value: piedata.data.usernum.todaysuper,
            name: "今日超级签下载",
          }),
          true
        );
        myChart6.resize();
        /*=========================================================== */
        /*=========================================================== */
        const myChart7 = echarts.init(
          document.getElementById("custom7") as HTMLDivElement
        );
        myChart7.setOption(
          baroption([
            { name: "苹果应用", quantity: datas.data.iosnum },
            { name: "安卓应用", quantity: datas.data.apknum },
            { name: "超级签应用", quantity: datas.data.supernum },
            { name: "开发者账号", quantity: datas.data.cernum },
          ]),
          true
        );
        myChart7.resize();
        spinning.value = false;
        /*=========================================================== */
        /*=========================================================== */
        window.addEventListener("resize", () => {
          myChart1.resize();
          myChart2.resize();
          myChart3.resize();
          myChart4.resize();
          myChart5.resize();
          myChart6.resize();
          myChart7.resize();
        });
      } catch (error) {
        spinning.value = false;
      }
    });

    return {
      spinning,
    };
  },
};
</script>
<style lang="less" scoped>
.childs {
  width: 60px;
  height: 60px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  margin-top: -30px;
}

.masklayer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.507);
  z-index: 99999;
}
</style>